<template>
  <div class="rightbody">

    <!-- <div class="tabheader2">
      <ul>
        <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">素材库</li>
        <li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">我的图片</li>
      </ul>
    </div> -->

    <div class="picfunc">
      <div class="funcwrap" v-show="nav_top_btn == 0">
        <ul>
          <Button type="primary" @click="changePic">更换图片</Button>
          <!--<Button type="primary" @click="addBackgroundImage">设为背景</Button>-->
          <li>
            <div class="slideblock">
              <label>透明</label>
              <Slider :max="100" :min="0" @on-input="OpacityChange" v-model="opacity" style="float:left;width:230px"
                      :tip-format="hideFormat" show-input></Slider>
            </div>
          </li>
          <li>
            <div class="slideblock">
              <label>旋转</label>
              <Slider :max="360" :min="0" v-model="rotateDeg" @on-input="rotateDegChange" style="float:left;width:230px"
                      :tip-format="hideFormat" show-input></Slider>
            </div>
          </li>
          <li>
            <div class="numberblock">
              <label>大小</label>
              <div class="inputwidth">
                <span>宽</span>
                <Input-number :max="2000" :min="1" v-model="widthValue" style="width:80px;margin-right:23px;"
                              @on-change="widthValueChange"></Input-number>
              </div>
              <div class="inputheight">
                <span>高</span>
                <Input-number :max="2000" :min="1" v-model="heightValue" style="width:80px;"
                              @on-change="heightValueChange"></Input-number>
              </div>
            </div>
          </li>
          <li>
            <div class="item">
              <div class="slideblock">
                <label>圆角</label>
                <Slider v-model="borderRadius" :min="0" :max="1000" style="float:left;width:230px"
                        :tip-format="hideFormat" @on-input="borderRadiusChange" show-input></Slider>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- <div class="tabs1" v-show="nav_top_btn == 1">
      <div class="pictabs1" v-infinite-scroll="loadMyDataMore" infinite-scroll-disabled="MyBusy"
           infinite-scroll-distance="0">
        <div class="picwrap">
          <ul v-show="myPicList.length != 0">
            <li v-for="(item,index) in myPicList">
              <img :src="item.thumb" @click="addMyImage(index)">
              <a @click="delItem(index)"></a>
            </li>
          </ul>
          <div v-show="myPicList.length==0" class="nopic"></div>
        </div>
      </div>
      <div class="upload pa">

        <Upload
          accept="image/gif,image/jpeg,image/jpg,image/png"
          ref="upload"
          :with-credentials="true"
          :max-size="1024*3"
          multiple
          :action="uploadUrl" :on-success="uploadsuccess" :on-error="uploaderror" :on-exceeded-size="uploadexceeded">
          <a>上传图片</a>
        </Upload>

      </div> -->


    <!-- </div> -->
    <div class="tabs2" v-show="nav_top_btn == 0">
      <div class="pictype clearfix">
        <ul>
          <li v-for="(item,index) in categorylist" :class="{'active':currentCategory == index}"
              @click="categoryClick(index)">
            <img src="../assets/images/file.png">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </div>

      <div class="pictabs2" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
        <div class="picwrap">
          <div style="text-align:center"></div>
          <ul>
            <waterfall :line-gap="150" :align="center" :fixed-height="true" :watch="currentCategoryList">
              <!-- each component is wrapped by a waterfall slot -->
              <waterfall-slot
                v-for="(item, index) in currentCategoryList"
                :width="140"
                :height="item.height*140/80+10"
                :order="index"
                :key="item.id"
              >
                <li>
                  <img :src="item.thumb" @click="addImage(index)">
                  <a v-if="item.catid==0" @click="delItem(index)"></a>
                </li>
              </waterfall-slot>
            </waterfall>

          </ul>
          <!-- <div v-show="currentCategoryList.length==0" class="nopic"></div> -->
        </div>
      </div>
      <div class="upload pa" v-if="uploadButton">
        <!-- <a @click="uploadPic">上传图片</a> -->
        <Upload
          accept="image/gif,image/jpeg,image/jpg,image/png"
          ref="upload"
          :with-credentials="true"
          :max-size="1024*3"
          multiple
          :action="uploadUrl" :on-success="uploadsuccess" :on-error="uploaderror" :on-exceeded-size="uploadexceeded">
          <a>上传图片</a>
        </Upload>
      </div>


    </div>
    <Modal
      v-model="showModal"
      title="提示"
      @on-ok="DelIndex"
      width="300">
      <p>是否删除？</p>
    </Modal>
  </div>

</template>
<script type="text/javascript">
  import api from '../api/index.js'
  // import uploadPic from './common/UploadPic'

  import Waterfall from 'vue-waterfall/lib/waterfall'
  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: "picfunc",
    components: {
      Waterfall,
      WaterfallSlot
    },
    computed: {
      ...mapGetters([
        "checkedItemData",
        "pagesData",
      ]),

    },
    data() {

      return {
        uploadUrl: "",
        baseUrl: "http://res.yaoyue365.com/",
        nav_top_btn: 0,
        categorylist: [],
        currentCategory: -1,
        uploadButton:true,

        delIndex: -1,

        currentCategoryList: [],
        page: 1, //当前页
        num: 10, // 一页显示多少条
        busy: false,

        myPicList: [],
        Mypage: 1, //当前页
        Mynum: 20, // 一页显示多少条
        MyBusy: false,
        showModal: false,
        color1: null,
        color2: null,
        color3: null,
        svgColorIndex: -1,
        widthValue: 0,
        heightValue: 0,
        borderShadow: 0,
        BorderShadowColor: "",
        borderListIndex: -1,
        borderShadowColorIndex: -1,
        BgColorList: [
          "#1abd9b",
          "#fff",
          "#45d1d7",
          "#4b5eb2",
          "#eeea00",
          "#f55b2e",
          "#d92940",
          "#000"
        ],
        borderColorList: [
          "#1abd9b",
          "#fff",
          "#45d1d7",
          "#4b5eb2",
          "#eeea00",
          "#f55b2e",
          "#d92940",
          "#000"
        ],
        copyCss: {},
        nav_top_btn: 0,
        options3: [
          {
            value: "none",
            label: "无"
          },
          {
            value: "dotted",
            label: "点"
          },
          {
            value: "solid",
            label: "实线"
          },
          {
            value: "dashed",
            label: "虚线"
          }
        ],
        options4: [
          {
            value: "linktype1",
            label: "页面"
          },
          {
            value: "linktype2",
            label: "网址"
          }
        ],
        options6: [
          {
            value: "enteranim1",
            label: "飞入1"
          },
          {
            value: "enteranim2",
            label: "飞入2"
          }
        ],
        animationList: [
          {
            value: "none",
            label: "无效果"
          },
          {
            value: "fadeInNormal",
            label: "淡入"
          },
          {
            value: "rotateInDownLeft",
            label: "从左滚入"
          },
          {
            value: "rotateInDownRight",
            label: "从右滚入"
          },
          {
            value: "zoomIn",
            label: "放大"
          },
          {
            value: "zoomInDown",
            label: "下落放大"
          },
          {
            value: "fadeIn",
            label: "弹性放大"
          },
          {
            value: "expandOpen",
            label: "弹性缩小"
          },
          {
            value: "fadeInRight",
            label: "从右飞入"
          },
          {
            value: "fadeInLeft",
            label: "从左飞入"
          },
          {
            value: "fadeInUp",
            label: "向上飞入"
          },
          {
            value: "fadeInDown",
            label: "向下飞入"
          },
          {
            value: "rotateIn",
            label: "旋转出现"
          },
          {
            value: "flipInY",
            label: "左右翻转"
          },
          {
            value: "flipInX",
            label: "上下翻转"
          },
          {
            value: "lightSpeedIn",
            label: "刹车"
          },
          {
            value: "slideLeft",
            label: "从右滑入"
          },
          {
            value: "slideRight",
            label: "从左滑入"
          },
          {
            value: "slideUp",
            label: "向上滑入"
          },
          {
            value: "slideDown",
            label: "向下滑入"
          },
          {
            value: "stretchRight",
            label: "从右展开"
          },
          {
            value: "stretchLeft",
            label: "从左展开"
          },
          {
            value: "pullUp",
            label: "向上展开"
          },
          {
            value: "pullDown",
            label: "向下展开"
          }
        ],
        freeFontList: [
          {
            value: "xiaoluti",
            label: "小鹿体"
          },
          {
            value: "yuanhei",
            label: "源黑"
          },
          {
            value: "kaiti",
            label: "楷体"
          },
          {
            value: "fangsong",
            label: "仿宋"
          },
          {
            value: "shouxiehaibaoti",
            label: "手写海报体"
          }
        ],
        options4: [
          {
            value: "无",
            label: "无"
          },
          {
            value: "网址",
            label: "网址"
          },
          {
            value: "页面",
            label: "页面"
          }
        ],
        fontWeight: "normal",
        fontStyle: "normal",
        textDecoration: "none",
        textAlign: "left",
        opacity: 0,
        borderStyle: "none",
        borderRadius: 0,
        borderWidth: 0,
        linktype: 0,
        jumpPageNumber: 0,
        jumpUrl: "",
        rotateDeg: 0,

        fontSize: 0,
        options2: [],
        anim: [],
        svgList: [],
        currentAniIndex: -1
      }

    },
    created() {

      this.uploadUrl = api.uploadPicType(2);
      this.initCategoryData()

      // this.getMyPicData(this.Mypage,this.Mynum);
    },
    mounted() {
      //      console.log(this.checkedItemData)
      this.givedata(this.checkedItemData);
    },
    watch: {
      checkedItemData: function (newCheckedItemData) {
        this.givedata(newCheckedItemData);
      },
      svgColors: function (newsvgColors) {
        this.svgList = JSON.stringify(newsvgColors.colors);
      }
    },
    methods: {
      givedata(data) {
        // debugger
        // this.opacity = 100 - data.out.css.opacity * 100;
        // this.anim = JSON.stringify(data.anim);

        this.rotateDeg =
          typeof data.out.css.transform == "undefined"
            ? 0
            : parseInt(data.out.css.transform.match(/\d+(\.\d+)?/g)[0]);

        this.borderStyle =
          typeof data.in.css.borderStyle == "undefined"
            ? "none"
            : data.in.css.borderStyle;
        this.borderWidth =
          typeof data.in.css.borderWidth == "undefined"
            ? 0
            : parseInt(data.in.css.borderWidth.replace("px", ""));

        this.borderRadius =
          typeof data.in.css.borderRadius == "undefined"
            ? 0
            : parseInt(data.in.css.borderRadius.replace("px", ""));

        this.boxShadow =
          typeof data.in.css.boxShadow == "undefined"
            ? 0
            : parseInt(data.in.css.boxShadow.split(" ")[3].replace("px", ""));

        this.widthValue =
          typeof data.in.css.width == "undefined"
            ? 0
            : parseInt(data.in.css.width);

        console.log(this.widthValue + "this.widthValue")
        this.heightValue =
          typeof data.in.css.height == "undefined"
            ? 0
            : parseInt(data.in.css.height);

        // console.log(typeof(data.in.properties.hasUrl) == "undefined")
        // debugger
        if (
          typeof data.in.properties.hasUrl == "undefined" ||
          data.in.properties.hasUrl == 0
        ) {
          this.linktype = "无";
        } else if (data.in.properties.hasUrl == 1) {
          this.linktype = "网址";
          // debugger
          this.jumpUrl = data.in.properties.jumpUrl;
        } else {
          this.linktype = "页面";
          this.jumpPageNumber =
            typeof data.in.properties.jumpPageNumber == "undefined"
              ? 1
              : parseInt(data.in.properties.jumpPageNumber);
        }
      },
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0;
            break;
          case 1:
            this.nav_top_btn = 1;
            break;
          case 2:
            this.nav_top_btn = 2;
            break;
        }
      },
      hideFormat() {
        return null;
      },
      setSVGAstyle(index) {
        var color = this.svgColors.colors[index];

        return "background: " + color;
      },
      setAstyle(index) {
        // debugger
        var color = this.BgColorList[index];

        return "background: " + color;
      },
      OpacityChange(value) {
        // this.opacity = value;

        // console.log(parseFloat((1 - value / 100).toFixed(2)))

        var params = {};
        params.value = value;
        params.key = "opacity";
        params.type = "out";

        this.$store.dispatch("changePicStyle", params);
      },
      rotateDegChange(value) {
        this.rotateDeg = value;

        //        console.log(value)
        var params = {};
        params.value = "rotateZ(" + value + "deg)";
        params.key = "transform";
        params.type = "out";

        this.$store.dispatch("changePicStyle", params);
      },
      borderStyleChange(value) {
        var params = {};
        params.value = value;
        params.key = "borderStyle";
        // console.log(params.value)

        this.$store.dispatch("changePicStyle", params);
      },
      borderWidthChange(value) {
        var params = {};
        params.value = value + "px";
        params.key = "borderWidth";
        // console.log(params.value)
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderColor(index) {
        var color = this.borderColorList[index];

        this.borderListIndex = index;
        var params = {};
        params.value = color;
        params.key = "borderColor";
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderColor2() {
        this.borderListIndex = -2;

        this.clearBorderStyle();
        var params = {};
        params.value = "";
        params.key = "borderColor";

        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      clearBorderStyle() {
        var params = {};
        params.value = "none";
        params.key = "borderStyle";

        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderColor3(value) {
        var params = {};
        params.value = value;
        params.key = "borderColor";

        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      borderRadiusChange(value) {
        //          console.log(value)
        var params = {};
        params.value = value + "px";
        params.key = "borderRadius";
        // params.type = "out";

        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      borderShadowChange(value) {
        var params = {};
        this.borderShadow = value;
        params.value = this.BorderShadowColor + " 0px 0px " + value + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderShadowColor(index) {
        var color = this.borderColorList[index];
        this.BorderShadowColor = color;
        this.borderShadowColorIndex = index;

        var params = {};
        params.value = color + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderShadowColor2() {
        this.borderShadowColorIndex = -2;
        this.borderListIndex = -2;
        this.BorderShadowColor = "";
        // this.clearBorderStyle();
        var params = {};
        params.value = "" + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      changeBorderShadowColor3(value) {
        this.BorderShadowColor = value;
        var params = {};
        params.value = value + " 0px 0px " + this.borderShadow + "px";
        params.key = "boxShadow";
        params.type = "out";
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      widthValueChange(value) {
        var params = {};
        params.value = value;
        params.key = "width";
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },
      heightValueChange(value) {
        var params = {};
        params.value = value;
        params.key = "height";
        // debugger
        this.$store.dispatch("changePicStyle", params);
      },

      //添加动画
      addAni() {
        var params = {};
        params.type = "add";

        this.$store.dispatch("changeAni", params);
      },
      //删除动画
      delAni(index) {
        var params = {};
        params.type = "del";
        params.index = index;

        this.$store.dispatch("changeAni", params);
      },
      //预览动画
      reviewAni() {
        // var anim = this.$store.state.workData.pages[this.$store.state.currentPage - 1].elements[this.$store.state.checkedItems[0]].anim

        this.$store.dispatch("reviewAni");
      },
      panelChange(key) {
        // console.log(key);
        this.currentAniIndex = parseInt(key[0]);
        // debugger
      },
      aniTypeChange(value) {
        //        console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "type";
        params.value = value;
        this.$store.dispatch("changeAni", params);
      },
      aniDurationChange(value) {
        // console.log('value' + value);
        //      console.log('value' + value);
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "duration";
        params.value = value;
        this.$store.dispatch("changeAni", params);
      },
      aniDelayChange(value) {
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "delay";
        params.value = value;
        this.$store.dispatch("changeAni", params);
      },
      aniCountChange(value) {
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = value;
        this.$store.dispatch("changeAni", params);
      },
      aniCountChange1(value) {
        //        console.log('value' + value);

        // console.log(JSON.parse(this.anim)[this.currentAniIndex].count)
        // console.log([this.currentAniIndex])
        // console.log(JSON.parse(this.anim)[this.currentAniIndex].count + "dddddd")
        // debugger
        var params = {};
        params.index = this.currentAniIndex;
        params.key = "count";
        params.value = value == true ? -1 : 1;

        // debugger
        this.$store.dispatch("changeAni", params);
      },

      jumpTypeChange(value) {
        var v = 0;

        if (value == "无") {
          v = 0;
        } else if (value == "网址") {
          v = 1;
        } else {
          v = 2;
        }

        var params = {};
        params.value = v;
        params.key = "hasUrl";
        (params.type = "in"),
          //         console.log(params.value)

          this.$store.dispatch("changePicStyle", params);
      },
      pageNumberChange(value) {
        var params = {};
        params.value = value;
        params.key = "jumpPageNumber";
        (params.type = "in"), this.$store.dispatch("changePicStyle", params);
      },
      jumpUrlChange(value) {
        // debugger
        //        console.log(this.jumpUrl)
        var params = {};
        params.value = this.jumpUrl;
        params.key = "jumpUrl";
        (params.type = "in"), this.$store.dispatch("changePicStyle", params);
      },
      uploadsuccess(response){

        //this.myPicList.unshift(response.file)
        this.categoryClick(0);
        this.$refs.upload.fileList = [];


      },
      uploaderror(error){
        // debugger
        this.$Message.error('上传图片失败');
      },
      uploadexceeded(){
        this.$Message.error('文件大小超出限制!最大3M!');
      },
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
        }
      },
      getMyPicData(page, pageSize){

        // this.MyBusy = true;
        //var _self = this;

        this.$http.get(api.getMyPic(2, page, pageSize)).then(res => {

          if(res.data.msg == '未登录'){
            this.uploadButton = false;
            //console.log('登录弹框');
            return
          }else{
            this.uploadButton = true;
          }


          //this.currentCategoryList = [];
          //debugger
          //console.log(this.currentCategoryList.length);
          if (this.currentCategoryList.length == 0) {
            
            this.currentCategoryList = [];
            this.currentCategoryList = res.data.lists;

            this.Mypage++;
            // this.MyBusy = false;
          } else {

            if (res.data.lists.length == 0) {

              // this.MyBusy = false;
              this.currentCategoryList = [];
            } else {
              this.currentCategoryList = [];
              for (var i = 0; i < res.data.lists.length; i++) {
                var bean = res.data.lists[i];
                this.currentCategoryList.push(bean);
              }
              this.Mypage++;
              // this.MyBusy = false;
            }
          }

        }).catch(error => { // 错误处理
          console.log(error)
          this.MyBusy = false;
          this.$Message.error('网络开小差啦~');
        })

      },
      loadMyDataMore(){
        this.MyBusy = true;
        let newPage = this.Mypage;
        // console.log(newPage + "----" + this.num)
        this.getMyPicData(newPage, this.Mynum);

        this.MyBusy = false;

      },
      loadMore() {
        this.busy = true;
        let newPage = this.page;
        // console.log(newPage + "----" + this.num)
        this.loadSysData(this.currentCategory, newPage, this.num);
        this.busy = false;
      },
      initCategoryData() {
        this.$http.get(api.getCategorylist(3)).then(res => {
//          console.log(res.data.lists)

          this.categorylist = res.data.lists;
          // debugger
          this.categoryClick(0);
        }).catch(error => { // 错误处理
          console.log(error)
          this.$Message.error('网络开小差啦~');
        })
      },
      addImage(index) {
        var obj = this.currentCategoryList[index];
        // debugger
        var params = {};
        params.type = "pic";
        params.src = obj['src'];
        params.width = obj['width'] * 5;
        params.height = obj['height'] * 5;

        this.$store.dispatch('addSysFile', params);

      },
      addMyImage(index){
        var obj = this.myPicList[index];
        var params = {};
        params.type = "pic";
        params.src = obj['src'];

        this.$store.dispatch('addSysFile', params);
      },
      delItem(index) {
        this.showModal = true;
        this.delIndex = index;
        debugger
      },
      DelIndex(){
        var tip = this.$Message.loading({
          content: '删除中...',
          duration: 0
        });

        var url = api.delFile(this.currentCategoryList[this.delIndex].id);
        this.$http.get(url).then(res => {

          setTimeout(tip, 1);

          if (res.data.code == 200) {


            if (res.data.status) {
              // this.$Message.error('xxx');
              this.currentCategoryList.splice(this.delIndex, 1);
            } else {

              this.$Message.error(res.data.msg);
            }


          } else {

            this.$Message.error('网络开小差啦~');
          }


        }).catch(error => {
          console.log(error)
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        })

      },
      categoryClick(index) {
        if (index == 0) {
          // debugger
          this.currentCategory = 0;
          this.Mypage = 1;
          this.loadMyDataMore();


          return;
        }

        if (this.currentCategory == index) {
          return;
        }


        this.currentCategoryList = [];
        if (index != 0) {
          this.page = 1;
        }
        this.currentCategory = index;
        this.loadSysData(index, 1, 25);

      },
      loadSysData(index, page, pageSize) {
        var cObj = this.categorylist[index];
        if (cObj === undefined) {
          return;
        }
        // this.busy = true
        var biztype = cObj['id'];
        //2 图片 1 背景 3音乐 4 svg
        this.$http.get(api.getSysfile(2, biztype, page, pageSize)).then(res => {

          if (this.currentCategoryList.length == 0) {

            this.currentCategoryList = res.data.lists;

            this.page++;
            // this.busy = false
          } else {

            if (res.data.lists.length == 0) {

              // this.busy = false;

            } else {
              for (var i = 0; i < res.data.lists.length; i++) {
                var bean = res.data.lists[i];
                this.currentCategoryList.push(bean);
              }
              // this.busy = false
              this.page++;
            }
          }

        }).catch(error => { // 错误处理
          console.log(error)
          this.busy = false
          this.$Message.error('网络开小差啦~');
        })
      },
      //显示我的图片
      showMyPic(){
        this.nav_top_btn = 1
      },
      changePic(){
        var params = {};
        params.index = 2;
        params.isChangePic = true;
        this.$store.dispatch('changeRightTab', params)
      },
    }

  }
</script>

<style type="text/javascript">
  .tabheader2 {
    height: 45px;
    line-height: 45px;
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
  }

  .tabheader2 li {
    float: left;
    width: 50%;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
  }

  .tabheader2 li.active {
    font-weight: bold;
    color: #1abd9b;
    background: #fff;
  }

  .pictabs1 {
    position: fixed;
    width: 330px;
    bottom: 80px;
    top: 105px;
    left: 65px;
    overflow-y: auto;
  }

  .pictabs2 {
    position: fixed;
    width: 310px;
    bottom: 80px;
    top: 475px;
    left: 80px;
    overflow-y: auto;
  }

  .pictype {
    position: fixed;
    top: 300px;
    width: 310px;
    height: 160px;
    left: 80px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
  }

  .pictype ul {
    overflow: hidden
  }

  .pictype li {
    float: left;
  }

  .pictype li img {
    display: block;
    margin: 0 auto;
    cursor: pointer;
  }

  .pictype li a {
    display: block;
    height: 24px;
    width: 60px;
    width: 64px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    margin: 5px;
    color: #808386;
  }

  .pictype li.active a {
    color: #23d7bc;
  }

  .picwrap li {
    position: relative;
    float: left;
    width: 139px;
    overflow: hidden;
  }

  .picwrap li:hover a {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    right: -25px;
    background: url(../assets/images/delpic.png) center 32px no-repeat #9ba8a5;
    transform: rotate(45deg);
    cursor: pointer
  }

  .picwrap li img {
    width: 139px;
    height: auto;
  }

  .upload {
    bottom: 15px;
    left: 35px;
  }

  .upload a {
    display: block;
    width: 260px;
    height: 40px;
    line-height: 40px;
    background: url(../assets/images/upload.png) no-repeat 80px center #1abd9b;
    text-indent: 110px;
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
  }

  .nopic {
    width: 100%;
    height: 400px;
    background: url(../assets/images/nopic.png) no-repeat center 80px;
  }

  .picfunc {
    position: fixed;
    top: 80px;
    left: 80px;
    width: 300px;
    border-bottom: 1px solid #eee;
  }

  .picfunc li {
    margin-bottom: 15px;
  }
</style>
